<template>
    <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="item.path || undefined" :class="{
            'breadcrumb-item-bold': index < breadcrumbList.length - 1,
            'last-item': index === breadcrumbList.length - 1
        }">
            {{ item.title }}
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const breadcrumbList = computed(() => {
    // 獲取當前路由的完整匹配記錄
    const matched = route.matched

    // 查找最深層的麵包屑配置
    let breadcrumb = []
    for (let i = matched.length - 1; i >= 0; i--) {
        if (matched[i].meta?.breadcrumb) {
            breadcrumb = matched[i].meta.breadcrumb
            break
        }
    }

    // 如果沒有配置，則自動生成
    if (breadcrumb.length === 0) {
        breadcrumb = matched
            .filter(item => item.meta?.title)
            .map((item, index) => ({
                title: item.meta.title,
                path: index < matched.length - 1 ? item.path : undefined
            }))
    }

    return breadcrumb
})
</script>

<style scoped lang="less">

.breadcrumb {
    background-color: #f5f7fa;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.breadcrumb-item-bold {
    font-weight: 600;
}

.last-item {
    font-weight: 400;
    color: var(--el-color-primary);
}

:deep(.el-breadcrumb__inner) {
    transition: all 0.2s ease;
    cursor: default;
}

:deep(.el-breadcrumb__inner:hover) {
    color: var(--el-color-primary);
    transform: translateY(-0.0625rem);
}
</style>